<template>
    <div class="side-menu" @click="sideHide">
        <ul>
            <router-link tag="li" v-for="l in list" :to="l.uri">
                {{l.name}}
                <i class="fa fa-arrow-right"></i>
            </router-link>
            
        </ul>
    </div>
</template>
<script>
export default{
    data(){
        return{
            list:[
                {name:"首页",uri:"/"},
                {name:"漫画",uri:"/comic"},
                {name:"资讯",uri:"/news"},
                {name:"美图",uri:"/image"}
            ]
        }
    },
    methods:{
        sideHide(){
            this.$emit('hide')
        }
    }
}
    
</script>
<style>
.side-menu{
    background:#ff4f65;
    opacity: .9;
    height:100%;
    position: fixed;
    top:40px;
    width: 100%;
    padding-top: 84px;
    z-index: 900;
    opacity: .8;
}
.side-menu ul{
    width: 80%;
    height: 100%;
    border-top:1px solid #ff4f65; 
}
.side-menu ul li{
    height: 50px;
    border-bottom: 1px dashed #ff4f65;
    font-size: 14px;
    line-height: 50px;
    padding:0 30px 0 20px;
    color:white;
}
.side-menu ul li i{
    float: right;
    line-height: 50px;
}

</style>